<template>
  <div class="bpr1-bg">
    <div class="co-title">
      <div class="co-title-name">
        <img src="@/assets/cockpit/bpr1-title.png" alt="">
      </div>
      <div class="co-title-right">
        <div class="co-title-breathe">
          <i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
      </div>
    </div>
    <!-- <div class="bpl-container">
      <ul class="bpr1-main" v-if="infoData.tudi">
        <li class="bpr1-each">
          <div>土地审批</div>
          <h6>新增面积/计划面积</h6>
          <p>{{ infoData.tudi.newArea }}/{{ infoData.tudi.planArea }}<span>公顷</span></p>
        </li>
        <li class="bpr1-each">
          <div>征收拆迁</div>
          <h6>已完成/受理项目数</h6>
          <p>{{ infoData.tudi.finishQuantity }}/{{ infoData.tudi.acceptQuantity }}<span>个</span></p>
        </li>
        <li class="bpr1-each">
          <div>土地储备</div>
          <h6>在库总量</h6>
          <p>{{ infoData.tudi.onStoreQuantity	 }}<span>公顷</span></p>
        </li>
        <li class="bpr1-each">
          <div>土地供应</div>
          <h6>已供面积</h6>
          <p>{{ infoData.tudi.hadSupplyArea }}<span>公顷</span></p>
        </li>
        <li class="bpr1-each">
          <div>耕地保护</div>
          <h6>保有量现状/目标值</h6>
          <p>{{ infoData.tudi.holdNowQuantity }}/{{ infoData.tudi.holdAimQuantity }}<span>公顷</span></p>
        </li>
        <li class="bpr1-each">
          <div>生态修复</div>
          <h6>已完成/受理项目数</h6>
          <p>{{ infoData.tudi.finishRepairQuantity }}/{{ infoData.tudi.acceptRepairQuantity }}<span>个</span></p>
        </li>
      </ul>
    </div> -->
    <div class="bpl-container">
      <ul class="bpr1-main">
        <li class="bpr1-each">
          <div>国有土地审批</div>
          <h6>审批面积</h6>
          <p>160.12<span>公顷</span></p>
        </li>
        <li class="bpr1-each">
          <div>征地拆迁</div>
          <h6>实施项目数量</h6>
          <p>187<span>个</span></p>
        </li>
        <li class="bpr1-each">
          <div>经营性土地储备</div>
          <h6>入库数量</h6>
          <p>1613.85<span>公顷</span></p>
        </li>
        <li class="bpr1-each">
          <div>土地供应</div>
          <h6>已供面积</h6>
          <p>74.28<span>公顷</span></p>
        </li>
        <li class="bpr1-each">
          <div>耕地保护</div>
          <h6>底线目标</h6>
          <p>3025700<span>亩</span></p>
        </li>
        <li class="bpr1-each">
          <div>矿山生态修复</div>
          <h6>评审方案个数</h6>
          <p>13<span>个</span></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({
  name: 'BprItem1',
  components: {
  }
})
export default class BprItem1 extends Vue {
  @Prop({default: {}}) infoData!: any
  mounted() {}
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpr1-bg {
  width: 100%;
  height: 100%;
  padding: 12px 16px 12px 80px;
  background: url('~@/assets/cockpit/bpr1-bg.png') no-repeat left center/ 99.5% 100%;
  position: relative;
  &::before {
    content: '';
    display: block;
    width: 20px;
    height: 103%;
    background: url('~@/assets/cockpit/bpr-bg-line.png') no-repeat 0/ 100% 100%;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translate(0, -50%);
  }
}
.bpr1-main {
  width: 100%;
  padding: 0 0 0 40px;
  display: flex;
  flex-flow: row wrap;
  .bpr1-each {
    flex: none;
    width: 33.33%;
    padding: 8px 12px;
    border-top: 1px solid rgba(#fff, .1);
    border-left: 1px solid rgba(#fff, .1);
    &:nth-child(-n+3) {
      border-top: 0;
    }
    &:nth-child(3n+1) {
      border-left: 0;
    }
    >div {
      width: 100%;
      padding: 0 0 0 6px;
      background: url('~@/assets/cockpit/bpr1-e-title-bg.png') no-repeat right center/ 99% 8px;
      font-size: 14px;
      line-height: 20px;
      color: #fff;
      position: relative;
      z-index: 1;
      &::before {
        content: '';
        width: 26px;
        height: 32px;
        background: url('~@/assets/cockpit/bpl3-e-title-left.png') no-repeat 0/ 100% 100%;
        position: absolute;
        left: -12px;
        top: -6px;
      }
    }
    >h6 {
      font-size: 12px !important;
      line-height: 18px;
      color: #BFFEFF;
      text-align: left;
      font-weight: 400;
    }
    >p {
      font-size: 15px !important;
      line-height: 20px;
      color: #fff;
      text-align: left;
      font-weight: 400;
      >span {
        font-size: 12px !important;
        color: #fff;
        margin: 0 0 0 2px;
      }
    }
  }
}
</style>
